<template>
  <div class="dataoverview">
    <el-card class="up">
      <div class="cardMain">
        <ul class="chart-top">
          <li class="item">
            <div class="circle">1</div>
            <div class="txt">今日新增用户</div>
          </li>
          <li class="item">
            <div class="circle">2134</div>
            <div class="txt">总用户量</div>
          </li>
          <li class="item">
            <div class="circle">3</div>
            <div class="txt">新增试题</div>
          </li>
          <li class="item">
            <div class="circle">1506</div>
            <div class="txt">总试题量</div>
          </li>
          <li class="item">
            <div class="circle">0</div>
            <div class="txt">总刷题量</div>
          </li>
          <li class="item">
            <div class="circle">0</div>
            <div class="txt">人均刷题量</div>
          </li>
        </ul>
      </div>
    </el-card>

    <el-card class="bottom">
      <div class="echarts" style="width: 1200px; height: 500px;">
        <e-charts
          class="chart"
          :option="option"
        />

      </div>
    </el-card>

  </div>
</template>

<script>

export default {

  data() {
    return {
      option: {
        title: {
          text: '热门城市答题数量'
        },
        tooltip: {},
        legend: {
          data: ['']
        },
        xAxis: {
          data: ['天津', '河南', '北京', '江西', '新疆', '上海', '新加坡', '河北', '陕西', '重庆', '浙江', '辽宁', '安徽', '湖北', '广西', '内蒙古']
        },
        yAxis: {},
        series: [
          {
            name: '数量',
            type: 'bar',
            data: [5, 20, 30, 15, 20, 36, 10, 10, 20, 20, 30, 15, 20, 20, 20, 30, 15]
          }
        ]

      }
    }

    // var myChart = echarts.init(document.querySelector('.box')),
    // 指定图表的配置项和数据  4.  指定配置项和数据(option)
  },
  mounted() {
    // const myChart = this.echart.echartsInstance
    // myChart.setOption(this.option)
  }
}
</script>

<style lang="scss" scoped>
.cardMain{
  padding: 20px;
  .chart-top{
    display: flex;
    justify-content: space-around;
    align-content: center;
    list-style: none;
    .circle{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      text-align: center;
      line-height: 100px;
      border: 2px solid green;

    }
    .txt{
        text-align: center;
      }

  }
}
.el-card{
  border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    transition: .3s;

}
</style>
